<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../css/index/index.min.css">
</head>

<body>
    <section class="all-nav">
        <a href="#home" class="all-nav-item">恣在家</a>
        <a href="#live" class="all-nav-item">
            <div class="all-nav-item-img"></div>
            <div>生活馆</div>
        </a>
        <a href="#design" class="all-nav-item">
            <div class="all-nav-item-img"></div>
            <div>设计稿</div>
        </a>
        <a href="#news" class="all-nav-item">
            <div class="all-nav-item-img"></div>
            <div>新闻馆</div>
        </a>
        <a href="#service" class="all-nav-item">
            <div class="all-nav-item-img"></div>
            <div>服务馆</div>
        </a>
        <a href="#center" class="all-nav-item">
            <div class="all-nav-item-img"></div>
            <div>中心馆</div>
        </a>
        <a href="#home" class="all-nav-item">
            <div class="all-nav-item-img"></div>
            <div>Top</div>
        </a>
    </section>
    <section class="all">
        <section class="container">
            <nav class="nav">
                <div>
                    <div class="nav-img">
                        <img src="../images/index/1668681397479.png" alt="">
                    </div>
                    <div class="nav-items">
                        <div class="nav-item active">首页</div>
                        <div class="nav-item">关于我们
                            <div class="show-item">
                                <div>公司简介</div>
                                <div>文化产品</div>
                                <div>发展历程</div>
                            </div>
                        </div>
                        <div class="nav-item">产品中心
                            <div class="show-item">
                                <div>简约美式</div>
                                <div>田园休闲</div>
                                <div>清新法式</div>
                                <div>现代都市</div>
                            </div>
                        </div>
                        <div class="nav-item">预约设计
                            <div class="show-item">
                                <div>精牌设计</div>
                                <div>设计申请</div>
                                <div>客户案例</div>
                            </div>
                        </div>
                        <div class="nav-item">新闻资讯
                            <div class="show-item">
                                <div>品牌资讯</div>
                                <div>热门观点</div>
                                <div>家具动态</div>
                                <div>精彩视频</div>
                            </div>
                        </div>
                        <div class="nav-item">服务平台
                            <div class="show-item show-item-last">
                                <div>理念服务</div>
                                <div>服务支持</div>
                                <div>服务承诺</div>
                                <div>在线保修</div>
                            </div>
                        </div>
                        <div class="nav-item">联系我们</div>
                    </div>
                </div>
            </nav>
            <section id="home" class="home-show">
                <div class="slide-box">
                    <div class="slide-item">
                        <div class="item-first">WARM & HOME & LIFE</div>
                        <div class="item-sec">GIVEYOUACOMFORTABLEHOME</div>
                        <div class="item-three">创新家具引领品牌</div>
                        <div class="item-line"></div>
                        <div class="item-four">给你温暖的家</div>
                        <div class="item-five">
                            <div class="it-f-title">
                                <div class="it-f-left-line"></div>
                                <div class="it-f-text">恣在家</div>
                                <div class="it-f-right-line"></div>
                            </div>
                            <div class="it-f-img">
                                <img src="../images/index/icon-banner.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="slide-item">
                        <div class="item-first">WARM & HOME & LIFE</div>
                        <div class="item-sec">GIVEYOUACOMFORTABLEHOME</div>
                        <div class="item-three">创新家具引领品牌</div>
                        <div class="item-line"></div>
                        <div class="item-four">给你温暖的家</div>
                        <div class="item-five">
                            <div class="it-f-title">
                                <div class="it-f-left-line"></div>
                                <div class="it-f-text">恣在家</div>
                                <div class="it-f-right-line"></div>
                            </div>
                            <div class="it-f-img">
                                <img src="../images/index/icon-banner.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="slide-item">
                        <div class="item-first">WARM & HOME & LIFE</div>
                        <div class="item-sec">GIVEYOUACOMFORTABLEHOME</div>
                        <div class="item-three">创新家具引领品牌</div>
                        <div class="item-line"></div>
                        <div class="item-four">给你温暖的家</div>
                        <div class="item-five">
                            <div class="it-f-title">
                                <div class="it-f-left-line"></div>
                                <div class="it-f-text">恣在家</div>
                                <div class="it-f-right-line"></div>
                            </div>
                            <div class="it-f-img">
                                <img src="../images/index/icon-banner.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="slide-item">
                        <div class="item-first">WARM & HOME & LIFE</div>
                        <div class="item-sec">GIVEYOUACOMFORTABLEHOME</div>
                        <div class="item-three">创新家具引领品牌</div>
                        <div class="item-line"></div>
                        <div class="item-four">给你温暖的家</div>
                        <div class="item-five">
                            <div class="it-f-title">
                                <div class="it-f-left-line"></div>
                                <div class="it-f-text">恣在家</div>
                                <div class="it-f-right-line"></div>
                            </div>
                            <div class="it-f-img">
                                <img src="../images/index/icon-banner.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slide-mask">
                    <div class="dots">
                        <div class="dots-item active"></div>
                        <div class="dots-item"></div>
                        <div class="dots-item"></div>
                    </div>
                </div>
            </section>
            <section id="live" class="first">
                <div class="first-map">
                    <img src="../images/index/1668750445718.png" alt="">
                </div>
                <div class="first-nav">
                    <div class="first-nav-item">简约美式</div>
                    <div class="first-nav-item">田园休闲</div>
                    <div class="first-nav-item">清新法式</div>
                    <div class="first-nav-item">现代都市</div>
                </div>
            </section>
            <section class="second">
                <div class="sec-slide">
                    <div class="sec-slide-item">
                        <img src="../images/index/file-bg.png" alt="">
                        <div class="ssi-big-img"></div>
                        <div class="ssi-little-img"></div>
                        <div class="ssi-little-text">时间更迭，件件物品在艺术氛围的衬托下韵味十足灵动且张力十足的传记圆腿简约与典雅的结合
                            现代都市里一笔浓墨重彩的色调简约美式里一缕典雅的英伦之风经典的场景，奇妙
                            的邂逅你，是否也在等待夏洛克的到来</div>
                    </div>
                </div>
                <div class="sec-mask">
                    <div class="sec-mask-left">
                        <img src="../images/index/1668821145857.png" alt="">
                    </div>
                    <div class="sec-mask-right">
                        <img src="../images/index/1668821145856.png" alt="">
                    </div>
                </div>
            </section>
            <section id="design" class="three">
                <div class="three-map">
                    <img src="../images/index/1668753158575.png" alt="">
                </div>
                <div class="three-box">
                    <div class="three-box-item">
                        <div>
                            <img src="../images/index/1668754824101.png" alt="">
                        </div>
                    </div>
                    <div class="three-box-item">
                        <div>
                            <img src="../images/index/1668754824098.png" alt="">
                        </div>
                    </div>
                    <div class="three-box-item">
                        <div>
                            <img src="../images/index/1668754824099.png" alt="">
                        </div>
                    </div>
                    <div class="three-box-item">
                        <div>
                            <img src="../images/index/1668754824104.png" alt="">
                        </div>
                    </div>
                </div>
                <div id="news" class="three-foo"></div>
                <div class="three-nav">
                    <div class="three-nav-item">品牌资讯</div>
                    <div class="three-nav-item">热门观点</div>
                    <div class="three-nav-item">家具动态</div>
                    <div class="three-nav-item">精彩视频</div>
                </div>
            </section>
            <section class="four">
                <div class="four-slide">
                    <div class="four-slide-item">
                        <div class="fsi-left">
                            <div class="fsi-left-first"></div>
                            <div class="fsi-left-sec">
                                <div>穿越人山人海，我们为造梦而来！</div>
                                <div>
                                    因为懂中国人对于家深深的执念，所以我们格外珍惜每一次对家的构建；因为见证了太多关于家的点滴幸福，所以我们了解家之于生活意义非凡。
                                </div>
                                <div>了解详情</div>
                            </div>
                        </div>
                        <div class="fsi-right">
                            <div class="fsi-right-item">
                                <div class="fsiri-left"></div>
                                <div class="fsiri-right">
                                    <div>2018什么牌子的床垫好？</div>
                                    <div>美克家居旗下全新线上品牌恣在家，以个性、时尚、多
                                        彩、百搭为核心。其床垫设计符合年轻人的睡...</div>
                                    <div>了解详情</div>
                                </div>
                            </div>
                            <div class="fsi-right-item">
                                <div class="fsiri-left"></div>
                                <div class="fsiri-right">
                                    <div>怎么辨别实木家具？ 从这五个方面入手就不会错。</div>
                                    <div>实木家具越来越受到大家的欢迎，一方面是因为实木天然环保，
                                        另一方面也是因为纯实木对工艺的要求比较高...</div>
                                    <div>了解详情</div>
                                </div>
                            </div>
                            <div class="fsi-right-item">
                                <div class="fsiri-left"></div>
                                <div class="fsiri-right">
                                    <div>想要打造正宗美式风格卧室，照着这些方式搭配...</div>
                                    <div>美式风格近几年特别流行，不管是年轻人还是中年人，似乎都
                                        对美式情有独钟。不过呢，很多人在装修新家时...</div>
                                    <div>了解详情</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="four-mask">
                    <div class="four-mask-left">
                        <img src="../images/index/1668821145857.png" alt="">
                    </div>
                    <div class="four-mask-right">
                        <img src="../images/index/1668821145856.png" alt="">
                    </div>
                </div>
            </section>
            <section id="service" class="five">
                <div class="five-item"></div>
                <div class="five-item"></div>
                <div class="five-item"></div>
                <div class="five-mask"></div>
            </section>
            <section id="center" class="six"></section>
            <footer class="footer">
                <div class="footer-first">
                    <div class="ff-left">
                        <div class="left-item">
                            <div>产品设计</div>
                            <div>公司简介</div>
                            <div>文化产品</div>
                            <div>发展历程</div>
                        </div>
                        <div class="left-item">
                            <div>产品中心</div>
                            <div>现代都市</div>
                            <div>折叠城市</div>
                            <div>清风物语</div>
                            <div>落落星辰</div>
                        </div>
                        <div class="left-item">
                            <div>预约设计</div>
                            <div>精牌设计</div>
                            <div>设计申请</div>
                            <div>客户案例</div>
                        </div>
                        <div class="left-item">
                            <div>新闻资讯</div>
                            <div>热门观点</div>
                            <div>家居动态</div>
                            <div>精彩视频</div>
                        </div>
                        <div class="left-item">
                            <div>服务平台</div>
                            <div>理念服务</div>
                            <div>服务支持</div>
                            <div>服务承诺</div>
                            <div>在线保修</div>
                        </div>
                    </div>
                    <div class="ff-right">
                        <div class="ff-r-title">联系我们</div>
                        <div class="right-content">
                            <div class="rc-item">
                                <div class="img">
                                    <img src="../images/index/1668759329451.png" alt="">
                                </div>
                                <div>河南省-郑州高新区-万仙山-万仙洞</div>
                            </div>
                            <div class="rc-item">
                                <div class="img">
                                    <img src="../images/index/1668759329457.png" alt="">
                                </div>
                                <div>110-123456789</div>
                            </div>
                            <div class="rc-item">
                                <div class="img">
                                    <img src="../images/index/1668759329454.png" alt="">
                                </div>
                                <div>www.110.com</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer-second"></div>
            </footer>
        </section>
    </section>
    <script src="../until/jQuery/jQuery.js"></script>
    <script>
        let time = null;
        let index = 0;
        jQuery(function () {
            callResize();
            callSetSlide();
            callEvent();
        });
        function callEvent() {
            jQuery('.dots').on({
                click: function (e) {
                    index = jQuery(this).index();
                    jQuery(".dots > .active").removeClass("active");
                    jQuery(this).addClass("active");
                    jQuery(".slide-box").css({
                        left: `calc(-100% * ${index++})`,
                        transition: "0.5s"
                    });
                    callAnimation();
                }
            }, ".dots-item");
            jQuery(".slide-mask").on({
                mouseenter: function () {
                    clearInterval(time);
                },
                mouseleave: () => {
                    clearInterval(time);
                    setTimeout(() => {
                        time = setInterval(slideInterval, 3000);
                    }, 0);
                }
            });
        }
        function callSetSlide() {
            time = setInterval(slideInterval, 3000);
        }
        function slideInterval() {
            jQuery(".dots > .active").removeClass("active");
            if (index == jQuery('.slide-item').length) {
                jQuery(".slide-box").css({
                    left: 0,
                    transition: "none"
                });
                index = 0;
                jQuery(jQuery('.dots-item')[index]).addClass("active");
                index++;
                return;
            }
            jQuery(".slide-box").css({
                left: `calc(-100% * ${index++})`,
                transition: "0.5s"
            });
            jQuery(jQuery('.dots-item')[index - 1]).addClass("active");
            if (index == jQuery('.slide-item').length) jQuery(jQuery('.dots-item')[0]).addClass("active");
            if (index == 1) return;
            callAnimation(1);
        }
        function callAnimation(value) {
            jQuery(".slide-item >div").css({
                display: "none"
            });
            setTimeout(() => {
                jQuery(".slide-item >div").css({
                    display: "block"
                });
            }, 500);
        }
        function callResize() {
            window.onresize = () => {
                let scale = document.documentElement.clientWidth / 1920;
                jQuery(".all").css({
                    transform: `scale(${scale})`,
                    width: document.documentElement.clientWidth / scale
                });
                jQuery("body").css({
                    height: jQuery(".all").height() * scale
                });
                jQuery(".all-nav").css({
                    transform: `scale(${scale})`,
                    right: `${0.2 * scale}rem`,
                    top: `${2.4 * scale}rem`
                });
            }
            window.onresize();
        }
    </script>
</body>

</html>